<template>
  <div style="width: 100%">
    <div v-if="$slots.headerTop" style="margin: 5px">
      <slot name="headerTop"></slot>
    </div>
    <div :class="`flex items-center ${prefixCls}__table-title-box`">
      <div :class="`${prefixCls}__tableTitle`">
        <!--修改标题插槽位置-->
        <TableTitle
          style="margin-right: 15px"
          :helpMessage="titleHelpMessage"
          :title="title"
          v-if="(!$slots.tableTitle && title) || alwaysShowTitle"
        />
        <slot name="tableTitle" v-if="$slots.tableTitle"></slot>
        <a-button v-if="rowSelectionTipType === 'onTableTitle'" class="row-selection-btn" type="text">
          <template v-if="selectRowKeys.length > 0">
            <span>
              <span>已选中 {{ selectRowKeys.length }} 条记录</span>
            </span>
            <a-divider type="vertical" />
            <a @click="setSelectedRowKeys([])">清空</a>
            <slot name="alertAfter"></slot>
          </template>
          <!-- <template v-else>
            <span>未选中任何数据</span>
          </template> -->
        </a-button>
      </div>

      <div :class="`${prefixCls}__toolbar`">
        <slot name="toolbar"></slot>
        <Divider type="vertical" v-if="$slots.toolbar && showTableSetting" />
        <TableSetting
          :class="`${prefixCls}__toolbar-desktop`"
          style="white-space: nowrap"
          :setting="tableSetting"
          v-if="showTableSetting"
          @columns-change="handleColumnChange"
        />
        <Popover
          v-if="showTableSetting"
          :overlayClassName="`${prefixCls}__toolbar-mobile`"
          trigger="click"
          placement="left"
          :getPopupContainer="(n) => n.parentElement"
        >
          <template #content>
            <TableSetting mode="mobile" :setting="tableSetting" @columns-change="handleColumnChange" />
          </template>
          <a-button :class="`${prefixCls}__toolbar-mobile`" type="text" preIcon="ant-design:menu" shape="circle" />
        </Popover>
      </div>
    </div>

    <!--添加tableTop插槽-->
    <div style="margin: -4px 0 -2px; padding-top: 5px">
      <slot name="tableTop">
        <a-alert type="info" show-icon class="alert" v-if="openRowSelection != null && rowSelectionTipType === 'onTableTop'">
          <template #message>
            <template v-if="selectRowKeys.length > 0">
              <span>
                <span>已选中 {{ selectRowKeys.length }} 条记录</span>
                <span v-if="isAcrossPage">(可跨页)</span>
              </span>
              <a-divider type="vertical" />
              <a @click="setSelectedRowKeys([])">清空</a>
              <slot name="alertAfter"></slot>
            </template>
            <template v-else>
              <span>未选中任何数据</span>
            </template>
          </template>
        </a-alert>
      </slot>
    </div>
    <!--添加tableTop插槽-->
  </div>
</template>
<script lang="ts">
  import type { TableSetting, ColumnChangeParam } from "../types/table"
  import type { PropType } from "vue"
  import { defineComponent, computed } from "vue"
  import { Divider } from "ant-design-vue"
  import TableSettingComponent from "./settings/index.vue"
  import TableTitle from "./TableTitle.vue"
  import { useDesign } from "/@/hooks/web/useDesign"
  import { useTableContext } from "../hooks/useTableContext"
  import { Popover } from "ant-design-vue"
  export default defineComponent({
    name: "BasicTableHeader",
    components: {
      Divider,
      TableTitle,
      TableSetting: TableSettingComponent,
      Popover,
    },
    props: {
      title: {
        type: [Function, String] as PropType<string | ((data: Recordable) => string)>,
      },
      tableSetting: {
        type: Object as PropType<TableSetting>,
      },
      showTableSetting: {
        type: Boolean,
      },
      alwaysShowTitle: {
        type: Boolean,
      },
      isCardTable: {
        type: Boolean,
      },
      titleHelpMessage: {
        type: [String, Array] as PropType<string | string[]>,
        default: "",
      },
      rowSelectionTipType: {
        type: [String] as PropType<string>,
        default: "",
      },
    },
    emits: ["columns-change"],
    setup(_, { emit }) {
      const { prefixCls } = useDesign("basic-table-header")
      function handleColumnChange(data: ColumnChangeParam[]) {
        emit("columns-change", data)
      }

      const { getSelectRowKeys, setSelectedRowKeys, getRowSelection } = useTableContext()
      const selectRowKeys = computed(() => getSelectRowKeys())
      const openRowSelection = computed(() => getRowSelection())
      // 是否允许跨页选择
      const isAcrossPage = computed(() => openRowSelection.value?.preserveSelectedRowKeys === true)

      return { prefixCls, handleColumnChange, selectRowKeys, setSelectedRowKeys, openRowSelection, isAcrossPage }
    },
  })
</script>
<style lang="less">
  @prefix-cls: ~"@{namespace}-basic-table-header";

  .@{prefix-cls} {
    &__toolbar {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex-wrap: wrap;

      > * {
        margin-right: 8px !important;
      }

      &-desktop {
        display: block;
      }

      &-mobile {
        display: none;
      }
    }
    &__tableTitle {
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;

      .anticon {
        // color: @primary-color; // 去掉 color 在标题插槽中的按钮图标颜色问题
      }

      > * {
        margin-right: 4px;
        margin-bottom: 4px;
      }

      .row-selection-btn span {
        margin-left: -5px;
        margin-right: -5px;
      }
      .row-selection-btn:hover {
        background-color: #ffffff;
        color: rgba(0, 0, 0, 0.88);
      }
    }

    &__title,
    &__toolbar {
      .ant-btn {
        padding: 2px 10px;
        line-height: 1.5;
        height: 30px;
        margin-top: 2px;
      }
    }

    @media (max-width: @screen-lg) {
      &__table-title-box {
        align-items: flex-end;
      }

      &__toolbar {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;

        > * {
          margin-right: 0;
        }

        .table-settings > * {
          margin-right: 0;
          margin-bottom: 6px;
        }
        &-desktop {
          display: none;
        }

        &-mobile {
          display: block;
          .table-settings > * {
            margin-right: 6px;
            margin-bottom: 0;
          }
        }
      }
    }
  }
</style>
